
import { Table, Pagination, Modal, Form, Input, Button, Select, Cascader } from 'antd';
import axios from 'axios';
import { useEffect, useState } from 'react';
import './shoplist.css'

export default function Shoplist() {
    const { Column } = Table;
    const { Option } = Select;

    // 声明数据
    const [page, setpage] = useState(1);
    const [pagesize, setpagesize] = useState(20);
    const [shopList, setshopList] = useState([]);
    const [num, setnum] = useState(0);
    const [shopDetial, setshopDetial] = useState({});
    const [shopCategory, setshopCategory] = useState([]);

    useEffect(() => {
        axios({
            method: 'GET',
            url: `https://elm.cangdu.org/shopping/restaurants?latitude=36.066231&longitude=120.382988&offset=${(page - 1) * 20}&limit=${pagesize}`
        }).then(res => {
            setshopList(res.data)
        })
        axios({
            method: 'GET',
            url: 'https://elm.cangdu.org/shopping/restaurants/count'
        }).then(res => {
            setnum(res.data.count);
        })

    }, [page, pagesize]);

    function pageChange(page, pageSize) {
        console.log(page);
        setpage(page)
    }
    function pageSizeChange(current, size) {
        console.log(size);
        setpagesize(size)
    }
    // 点击编辑按钮 调取 店铺分类 的接口
    function getShopCategory() {
        axios({
            method: 'GET',
            url: 'https://elm.cangdu.org/shopping/v2/restaurant/category'
        }).then(res => {
            setshopCategory(res.data)
        })
    }

    // 对话框的函数以及变量声明
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [shopDetial_category, setshopDetial_category] = useState();
    function showModal(record) {
        setIsModalOpen(true);
        setshopDetial(record)
        // console.log(record);
        getShopCategory()
        setshopDetial_category(record.category)
    };
    function handleOk() {
        setIsModalOpen(false);
    };
    function handleCancel() {
        setIsModalOpen(false);
    };
    const onChange = (value) => {
        setshopDetial_category(value)
    };

    return (
        <div id="shoplist">
            <Table
                // columns={columns}
                dataSource={shopList}
                size={'middle'}
                rowKey="id"
                pagination={false}
                expandable={{
                    // 额外的展开行
                    expandedRowRender: (record) => (
                        <form className='form'>
                            <div className='el-form-item'>
                                <label className='el-form-item__label'>店铺名称</label>
                                <div className="el-form-item__content">
                                    <span>{record.name}</span>
                                </div>
                            </div>
                            <div className='el-form-item'>
                                <label className='el-form-item__label'>店铺地址</label>
                                <div className="el-form-item__content">
                                    <span>{record.address}</span>
                                </div>
                            </div>
                            <div className='el-form-item'>
                                <label className='el-form-item__label'>店铺介绍</label>
                                <div className="el-form-item__content">
                                    <span>{record.description}</span>
                                </div>
                            </div>
                            <div className='el-form-item'>
                                <label className='el-form-item__label'>店铺ID</label>
                                <div className="el-form-item__content">
                                    <span>{record.id}</span>
                                </div>
                            </div>
                            <div className='el-form-item'>
                                <label className='el-form-item__label'>联系电话</label>
                                <div className="el-form-item__content">
                                    <span>{record.phone}</span>
                                </div>
                            </div>
                            <div className='el-form-item'>
                                <label className='el-form-item__label'>店铺评分</label>
                                <div className="el-form-item__content">
                                    <span>{record.rating}</span>
                                </div>
                            </div>
                            <div className='el-form-item'>
                                <label className='el-form-item__label'>销售量</label>
                                <div className="el-form-item__content">
                                    <span>{record.recent_order_num}</span>
                                </div>
                            </div>
                            <div className='el-form-item'>
                                <label className='el-form-item__label'>分类</label>
                                <div className="el-form-item__content">
                                    <span>{record.category}</span>
                                </div>
                            </div>
                        </form>

                    ),
                }}
            >
                <Column title='店铺名称' dataIndex='name' key='name' width={'170px'} align={'center'} />
                <Column title='店铺地址' dataIndex='address' key='address' width={'260px'} align={'center'} />
                <Column title='店铺介绍' dataIndex='description' key='description' width={'260px'} align={'center'} />
                <Column title='操作' align={'center'}
                    render={(text, record) => {
                        return (
                            <div>
                                <button onClick={showModal.bind(this, record)} className="btn"> 编辑 </button>
                                <button className="btn"> 添加食品 </button>
                                <button className="btn delete"> 删除 </button>
                            </div>
                        )
                    }}
                />
            </Table>
            <Modal
                title="修改店铺信息"
                footer={[
                    <Button key="back" onClick={handleOk}>取消</Button>,
                    <Button key="submit" className='sure' onClick={handleCancel}>确定</Button>
                ]}
                open={isModalOpen}
                onOk={handleOk}
                onCancel={handleCancel}
            >
                <Form.Item label="店铺名称">
                    <Input value={shopDetial.name} />
                </Form.Item>
                <Form.Item label="详细地址">
                    <Input value={shopDetial.address} />
                    当前城市：
                </Form.Item>
                <Form.Item label="店铺介绍">
                    <Input value={shopDetial.description} />
                </Form.Item>
                <Form.Item label="联系电话">
                    <Input value={shopDetial.phone} />
                </Form.Item>
                {/* <Form.Item label="店铺分类">
                    <Input value={shopDetial.category} />
                </Form.Item> */}
                <Form.Item label="店铺分类">
                    <Cascader
                        options={shopCategory}
                        onChange={onChange}
                        value={shopDetial_category}
                        fieldNames={{ label: 'name', value: 'name', children: 'sub_categories' }}
                        changeOnSelect
                    />
                </Form.Item>
                <Form.Item label="店铺图片">
                    <img src={`https://elm.cangdu.org/img/${shopDetial.image_path}`} className="image" />
                </Form.Item>
            </Modal>
            <Pagination
                onShowSizeChange={pageSizeChange}  // pagesize变化的回调函数
                defaultCurrent={1}  // 默认的当前页数
                total={num}  // 数据总数
                onChange={pageChange}
                showTotal={(num) => `共 ${num} 条`}
                pageSize={pagesize}
                current={page}
                showQuickJumper
                showSizeChanger
            />
        </div>
    )
}



